<script setup lang="ts">
  import { ref, watch, computed } from 'vue';
  import { queryDeviceInfoDetail } from '@/api/device-management/running';
  import InfoItem from './info-item.vue';

  const props = defineProps({
    deviceId: {
      type: String,
      default: '',
    },
  });

  const loading = ref(false);
  const alarmTableColumns = [
    // {title: '序号', dataIndex: ''},
    {title: '报警时间', dataIndex: 'alarmTime', ellipsis: true, tooltip: true},
    {title: '处理状态', dataIndex: 'disposeStatusName'},
    {title: '处理人员', dataIndex: 'staffName'},
    {
      title: '操作',
      align: 'center' as const,
      dataIndex: 'action',
      slotName: 'action',
      fixed: 'right',
      width: 100,
    },
  ];
  const deviceInfo = ref<any>({});
  const contacts = ref({
    names: [] as string[],
    phones: [] as string[],
    rels: [] as string[],
  });
  // const alarmRecords = ref({
  //   times: [] as string[],
  //   status: [] as string[],
  //   staffs: [] as string[],
  // });
  // 测试数据
  const alarmRecords = [
    {
      alarmTime: '2025-09-30 10:00',
      disposeStatusName: '待处理',
      staffName: '白微微',
    }
  ];

  const getDeviceInfoDetail = () => {
    queryDeviceInfoDetail(props.deviceId)
      .then((res) => {
        deviceInfo.value = res;
        if (res.contacts) {
          res.contacts.forEach((item: any)=>{
            contacts.value.names.push(item.name);
            contacts.value.phones.push(item.phone);
            contacts.value.rels.push(item.relation);
          });
        }
        // if (res.alarmRecords) {
        //   res.alarmRecords.forEach((item: any)=>{
        //     alarmRecords.value.times.push(item.alarmTime);
        //     alarmRecords.value.status.push(item.disposeStatusName);
        //     alarmRecords.value.staffs.push(item.staffName);
        //   });
        // }
      })
      .catch((err) => {}).finally(()=>{
        loading.value = false;
      });
  };

  watch(
    () => props.deviceId,
    (newVal) => {
      if (newVal) {
        getDeviceInfoDetail();
      }
    },
    { immediate: true }
  );
</script>

<template>
  <div class="m-running-info">
    <InfoItem title="客户信息">
      <template #left>
        <div>
          <span class="label">客户姓名</span>
          <span class="value">{{ deviceInfo.customerName }}</span>
        </div>
      </template>
      <template #center>
        <div>
          <span class="label">客户性别</span>
          <span class="value">{{ deviceInfo.customerGender }}</span>
        </div>
      </template>
      <template #right>
        <div>
          <span class="label">关联站点</span>
          <span class="value">{{ deviceInfo.stationName }}</span>
        </div>
      </template>
    </InfoItem>
    <InfoItem style="margin-top: 15px" title="设备基本信息">
      <template #left>
        <div>
          <span class="label">设备型号</span>
          <span class="value">{{ deviceInfo.deviceModel }}</span>
        </div>
        <div>
          <span class="label">设备电量</span>
          <span class="value green">{{ deviceInfo.powerValue }}</span>
        </div>
      </template>
      <template #center>
        <div>
          <span class="label">设备唯一编码</span>
          <span class="value">{{ deviceInfo.deviceCode }}</span>
        </div>
        <div>
          <span class="label">设备信号强度</span>
          <span class="value green">{{ deviceInfo.signalLevel }}</span>
        </div>
      </template>
      <template #right>
        <div>
          <span class="label">运行状态</span>
          <span class="value green">{{ deviceInfo.runningStatusName }}</span>
        </div>
        <div>
          <span class="label">付费类型</span>
          <span class="value">??</span>
        </div>
      </template>
    </InfoItem>
    <InfoItem style="margin-top: 15px" title="SIM卡信息">
      <template #left>
        <div>
          <span class="label">运营商</span>
          <span class="value">{{ deviceInfo.simOperator }}</span>
        </div>
        <div>
          <span class="label">MSISDN</span>
          <span class="value">{{ deviceInfo.simNumber }}</span>
        </div>
      </template>
      <template #center>
        <div>
          <span class="label">套餐</span>
          <span class="value">{{ deviceInfo.simPlan }}</span>
        </div>
        <div>
          <span class="label">ICCID</span>
          <span class="value">{{ deviceInfo.simIccid }}</span>
        </div>
      </template>
      <template #right>
        <div>
          <span class="label">卡状态</span>
          <span class="value green">{{ deviceInfo.simStatusName }}</span>
        </div>
        <div>
          <span class="label">到期日期</span>
          <span class="value">{{ deviceInfo.simExpireDate }}</span>
        </div>
      </template>
    </InfoItem>
    <InfoItem style="margin-top: 15px" title="安装信息">
      <template #left>
        <div>
          <span class="label">安装地点</span>
          <span class="value">{{ deviceInfo.installAddress }}</span>
        </div>
      </template>
      <template #center>
        <div>
          <span class="label">安装位置</span>
          <span class="value">{{ deviceInfo.installLocation }}</span>
        </div>
      </template>
    </InfoItem>
    <InfoItem style="margin-top: 15px" title="紧急联系人信息">
      <template #left>
        <div v-for="(item, index) of contacts.names" :key="'ctt-n-'+index">
          <span class="label">联系人<span>{{ index+1 }}</span>姓名</span>
          <span class="value">{{ item }}</span>
        </div>
      </template>
      <template #center>
        <div v-for="(item, index) of contacts.rels" :key="'ctt-r-'+index">
          <span class="label">关系</span>
          <span class="value">{{ item }}</span>
        </div>
      </template>
      <template #right>
        <div v-for="(item, index) of contacts.phones" :key="'ctt-r-'+index">
          <span class="label">联系电话</span>
          <span class="value">{{ item }}</span>
        </div>
      </template>
    </InfoItem>
    <InfoItem style="margin-top: 15px;" title="设备报警记录" type="slot">
      <template #default>
        <div style="padding: 6px;">
          <!-- <div>
            <a-table :bordered="false" :columns="alarmTableColumns" :data="alarmRecords" >
              <template #action="{ record }">
                <a-button type="text" @click="console.log('查看:', record);">查看</a-button>
              </template>
            </a-table>
          </div> -->
          <div v-if="deviceInfo.alarmRecords && deviceInfo.alarmRecords.length > 0">
            <a-table :bordered="false" :columns="alarmTableColumns" :data="alarmRecords" >
              <template #action="{ record }">
                <a-button type="text" @click="console.log('查看:', record);">查看</a-button>
              </template>
            </a-table>
          </div>
          <div v-else>
            <a-empty />
          </div>
        </div>
      </template>
    </InfoItem>
  </div>
</template>

<style lang="less">
  .m-running-info {
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 12px 12px 20px;

    &::-webkit-scrollbar {
      display: none;
    }
  }
</style>
